<template>
  <view style="text-align: center; ">
    <!-- 显示图片区域 -->
    <view style="margin-top: 100px;">
      <image 
        :src="iconFilePath" 
        @click="updateImage()" 
        mode="aspectFill" 
        style="width: 200rpx; height: 200rpx; border-radius: 50%;"
      ></image>
    </view>

    <!-- 功能按钮区域 -->
    <button @click="updateImage()" style="margin-top: 20px;">选择图片显示</button>
    <button @click="previewImage()" style="margin-top: 20px;">预览图片</button>
    <button @click="getImageInfo()" style="margin-top: 20px;">获取图片信息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 图片路径初始值（可替换为项目内静态图片路径）
      iconFilePath: "/static/logo.png" 
    }
  },
  methods: {
    /**
     * 选择图片并更新显示
     */
    updateImage() {
      uni.chooseImage({
        count: 1, // 仅选择1张图片
        sourceType: ['album'], // 从相册选择
        success: (res) => {
          console.log("选择的图片临时路径：", res.tempFilePaths[0]);
          this.iconFilePath = res.tempFilePaths[0]; // 更新图片路径
        }
      });
    },

    /**
     * 预览图片
     */
    previewImage() {
      uni.previewImage({
        current: this.iconFilePath, // 当前显示的图片路径
        urls: [this.iconFilePath] // 需要预览的图片数组（支持多张）
      });
    },

    /**
     * 获取并展示图片信息
     */
    getImageInfo() {
      uni.getImageInfo({
        src: this.iconFilePath, // 图片路径
        success: (info) => {
          console.log("图片信息：", info);
          // 弹窗展示图片宽高、格式等信息
          uni.showModal({
            title: '图片信息',
            content: `宽度：${info.width}px\n高度：${info.height}px\n格式：${info.type}`,
            showCancel: false
          });
        },
        fail: (err) => {
          console.error("获取图片信息失败：", err);
          uni.showToast({
            title: '获取失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>
<style>
	
	
</style>